<template>
  <div class="user">
    <div class="user-item">
      <div class="item-table title">个人主页</div>
      <div class="item-table head-img">
        <div class="head-img">
          <input
            type="file"
            id="upload"
            style="display: none"
            accept="image/gif,image/jpeg,image/png,image/jpg"
            @change="freshImg"
          />
          <div class="border" @click="uploadIMg">
            <img :src="imgsrc" class="imgDiv" />
          </div>
        </div>
      </div>
      <div class="item-table">用户名：{{ username }}</div>
      <div class="item-table">胖币：{{ totalpangbi }}</div>
      <div class="item-table pangbi" @click="priceshow = !priceshow">
        充值胖币
      </div>

      <div class="chongzhi" v-show="priceshow">
        <button class="return" @click="priceshow = false">x</button>
        <div class="getprice" @click="price($event)">
          <div class="price-item">
            <div class="item">1000</div>
            <div class="item">100</div>
          </div>
          <input
            class="input"
            type="text"
            placeholder="输入金额"
            v-model="priceinput"
          />
        </div>
        <div class="total">
          充值金额{{ pricecount }}
          <button class="goconfrim" @click="confrimFlag = true">充值</button>
        </div>
      </div>

      <div class="confrim" v-show="confrimFlag">
        <div class="desc">确认充值吗？</div>

        <div class="btn">
          <button class="left" @click="sure">确认</button>
          <button @click="confrimFlag = false">取消</button>
        </div>
      </div>
      <!-- <div class="deleuser">注销用户</div> -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      priceshow: false,
      priceinput: 0,
      userInfo: {},
      confrimFlag: false,
      pricecount: 0,
      imgsrc:null,
    };
  },

  watch: {
    priceinput(newv) {
      const rule = /^([1-9][0-9]*)$/;
      //   console.log(rule.test(newv));
      if (rule.test(newv)) {
        this.pricecount = newv;
      } else {
        this.pricecount = 0;
      }
    },
  },
  created() {
     let userInfo = localStorage.userInfo
          ? JSON.parse(localStorage.userInfo)
          : {};
    if(userInfo.img){
      this.imgsrc=userInfo.img
      console.log(2);
    }else{
      console.log(1);
      this.imgsrc=require("../../assets/logo.png")
    }
  },
  methods: {
    uploadIMg() {
      document.getElementById("upload").click();
    },
    freshImg(e) {
      // console.log(e);

      let fr = new FileReader();

      fr.readAsDataURL(e.target.files[0]);

      fr.onload = () => {
        this.imgsrc = fr.result;

         let userInfo = localStorage.userInfo
          ? JSON.parse(localStorage.userInfo)
          : {};

        localStorage.userInfo = JSON.stringify({
          pangbi:userInfo.pangbi,
          img: this.imgsrc,
        });
      };
    },
    sure() {
      if (this.pricecount !== 0) {
        let userInfo = localStorage.userInfo
          ? JSON.parse(localStorage.userInfo)
          : {};

        let lastprice = userInfo.pangbi ? userInfo.pangbi : 0;

        this.userInfo = userInfo;
        localStorage.userInfo = JSON.stringify({
          pangbi: parseInt(this.pricecount) + lastprice,
          img:userInfo.img
        });

        this.confrimFlag = false;
        this.$router.go(0);
      } else {
        alert("不能为0");
      }

      console.log();
    },

    price(e) {
      if (e.target.className == "item") {
        this.pricecount = e.target.textContent;
      }
    },
  },
  computed: {
    username() {
      return JSON.parse(localStorage.getItem("user"));
    },
    totalpangbi() {
      let userInfo = localStorage.userInfo
        ? JSON.parse(localStorage.userInfo)
        : {};
      if (userInfo.pangbi) {
         return userInfo.pangbi;
        
      } else {
       return 0;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.user {
  position: fixed;
  top: 55px;
  width: 100vw;
  height: 100vh;
  background-color: #fff;
  .user-item {
    position: fixed;
    background-color: rgb(54, 200, 240, 0.3);
    border-radius: 20px;
    left: 10%;
    font-size: 20px;
    text-align: left;
    top: 10%;
    width: 80%;
    height: 80%;
    padding: 20px 10px;
    .item-table {
      padding: 20px 10px;
      font-size: 15px;
      &.head-img {
        width: 70px;
        height: 70px;
        border: 1px solid rgb(128, 114, 114, 0.3);
        padding: 0;
        position: relative;
        left: 50%;
        transform: translateX(-50%);

        .border {
          width: 70px;
          height: 70px;
        }

        .img-input {
          width: 70px;
          height: 70px;
          display: none;
        }
        img {
          width: 100%;
          height: 100%;
        }
      }
      &.title {
        font-size: 22px;
        color: rgb(152, 146, 146, 0.5);
        border-bottom: 1px solid rgb(152, 146, 146, 0.3);
        text-align: center;
      }
      &.pangbi {
        border: 1px solid gray;
        text-align: center;
        color: white;
        background-color: rgb(198, 172, 122, 0.4);
        border-radius: 10px;
        margin-top: 200px;
      }
    }
    .chongzhi {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate3d(-50%, -50%, 0);
      border-radius: 20px;
      color: rgb(156, 143, 143);
      width: 80%;
      height: 80%;
      background-color: #fff;
      padding: 20px 10px;

      div {
        padding: 10px;
        margin: 0;
      }
      .price-item {
        width: 310px;
        display: flex;
        .item {
          flex: 1;
          border-radius: 30px;
          border: 1px solid #333;
          font-size: 12px;
          text-align: center;
        }
      }
      .input {
        width: 310px;
        height: 50px;
        border-radius: 10px;
        outline: none;
        border: 0;
        background-color: rgb(103, 98, 98, 0.4);
      }
      .goconfrim {
        position: absolute;
        bottom: 30%;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 50%;
        width: 50px;
        height: 50px;
        color: #777;
        font-size: 14px;
        border: 0;
        z-index: 100;
      }
    }

    .confrim {
      z-index: 300;
      width: 50%;
      height: 50%;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate3d(-50%, -50%, 0);
      background-color: rgb(179, 172, 172);
      border-radius: 20px;
      .desc {
        padding: 20px 10px;
      }
      .btn {
        display: flex;
        position: absolute;
        justify-content: space-around;
        width: 100%;
        bottom: 0;
        padding: 0%;
        button {
          border-radius: 20px;
          width: 60px;
          height: 30px;
          background-color: rgb(98, 80, 80);
          color: white;
          font-size: 12px;
          border: 0;
        }
      }
    }
  }
}
</style>